<template>
  <!-- 查询表格数据 -->
  <div class="TableWrapper">
    <!-- 选择设备 -->
    <section class="section">
      <div class="sectionTop">
        <h3>选择设备{{this.selectedRows.length}}</h3>
        <a-input-search allow-clear
                        placeholder="请输入设备号/设备名称"
                        v-model="inputValue"
                        @search="onSearch" />
      </div>
      <!-- 表格 -->
      <!-- <div class="sectionCont"
           v-if="dataTable">
                 @change="onChange"  -->
      <!-- :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}" -->
      <div class="sectionCont"
           v-if="dataTable">
        <a-table :columns="columns"
                 :loading="loading"
                 :data-source="dataTable"
                 :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
                 :pagination="pagination"
                 :default-current="2"
                 :total="500"
                 show-size-changer
                 show-quick-jumper
                 @change="onChange">
          <template slot="operation"
                    slot-scope="text, record">
            <div class="editable-row-operations">
              <a @click="() => edit(record,record.key)">数据</a>
              <a class="marginLeft16"
                 @click="() => download(record)">下载</a>
            </div>
          </template>
        </a-table>
      </div>
    </section>

    <!-- 下载数据弹框 -->
    <DownFormModel :downloadShow="downloadShow"
                   :downData="downData"
                   @hideDownModal="hideDownModal" />

  </div>
</template>

<script>
import DownFormModel from './downformModel'
export default {
  props: ['pageName', 'columns', 'dataTable'], /* pageName: 菜单名字  columns: 表头数据  dataTable: 表格数据 */
  data () {
    return {
      inputValue: '', // 搜索
      dataTableOld: [], /* dataTable: 表格原始数据 */
      // dataTable: [], /* dataTable: 表格数据 store参数 */
      selectedNum: 7, /* 表格可选中最大条数 */
      selectedRowKeys: [], /* 选中此处可配置默认列 */
      selectedRows: [], /* 选中此处可配置默认列 */
      pagination: { // 表格分页
        defaultPageSize: 10,
        showTotal: total => '',
        showSizeChanger: true,
        pageSizeOptions: ['10'],
        onShowSizeChange: function (current, pageSize) { this.pageSize = pageSize },
        showQuickJumper: true
      },
      downloadShow: false,
      downData: '',
      loading: true // 表格加载中
    }
  },
  created () {
    // props参数
    if (this.dataTable) { // 设置表格默认选择列
      var len = this.dataTable.length < this.num ? this.dataTable.length : this.num
      if (this.dataTable.length > 0) {
        for (var i = 0; i < len; i++) {
          this.selectedRowKeys.push(this.dataTable[i].key)
          this.selectedRows.push(this.dataTable[i])
        }
        this.loading = false
      }
    }

    // store参数
    // if (this.$store.state.moduleSD.DataTable) {
    //   this.dataTableOld = this.$store.state.moduleSD.DataTable
    //   this.dataTable = this.$store.state.moduleSD.DataTable
    //   //   const selectedTable = this.$store.state.moduleSD.SelectedTable
    //   //   this.selectedRowKeys = selectedTable.selectedRowKeys
    //   //   this.selectedRows = selectedTable.selectedRows
    //   //   this.loading = false
    // }
  },
  methods: {
    onSearch (value) { /* 表格搜索 设备号 / 设备名称 */
      if (value) {
        const getVal = value.trim()
        const dataTableOld = this.dataTable // props参数
        // const dataTableOld = this.dataTableOld // store参数
        const dataNew = dataTableOld.filter((json, index, arr) => {
          return (json.type).trim() === getVal || (json.dname).trim() === getVal
        })
        this.selectedRows = []
        this.$emit('getDataTable', dataNew)
        // this.dataTable = dataNew // store参数
      } else {
        this.$emit('getDataTable')
        // const dataTableOld = this.dataTableOld // store参数
        // this.dataTable = dataTableOld // store参数
      }
    },
    onChange (pageNumber) { /* 表格-跳转页面 */
      // console.log('Page: ', pageNumber)
    },
    edit (data, key) { /* 表格-查看数据 */
      window.sessionStorage.setItem('pageName', this.pageName)
      this.$router.push({ path: 'DataList', query: { param: JSON.stringify(data) } })
    },
    download (data) { /* 表格-下载数据 */
      this.downData = data
      this.downloadShow = true
    },
    hideDownModal (val) { /* 关闭-下载弹框 */
      this.downloadShow = false
    },
    onSelectChange (selectedRowKeys, selectedRows) { /* 表格-选中的数据 正式 */
      if (selectedRowKeys.length > this.selectedNum) {
        this.$message.warning(`最多只能选择${this.selectedNum}条！！`)
      } else {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        // const selectedTable = this.$store.state.moduleSD.SelectedTable
        // selectedTable.selectedRowKeys = selectedRowKeys
        // selectedTable.selectedRows = selectedRows
        // this.$store.commit('updateSelectedTable', selectedTable)
      }
    }
  },
  watch: {
    // '$store.state.moduleSD.DataTable': function () { // store参数
    //   const tableDataNew = this.$store.state.moduleSD.DataTable
    //   this.dataTableOld = tableDataNew
    //   this.dataTable = tableDataNew
    // },
    selectedRows: function () {
      this.$emit('getSelectChange', this.selectedRows)
    },
    dataTable: { // 设置表格默认选择列
      handler: function (value) {
        var len = value.length < this.selectedNum ? value.length : this.selectedNum
        const selectedRowKeys = []
        const selectedRows = []
        for (var i = 0; i < len; i++) {
          selectedRowKeys.push(value[i].key)
          selectedRows.push(value[i])
        }
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        this.loading = false
        // store参数
        // const selectedTable = {
        //     selectedRowKeys: selectedRowKeys,
        //     selectedRows: selectedRows
        // }
        // this.$store.commit('updateSelectedTable', selectedTable)
      },
      deep: true
    }
  },
  components: {
    DownFormModel
  }
}
</script>

<style lang="less" scoped>
// .TableWrapper {
//   .section {
//     background-color: #fff;
//     border-radius: 0.12rem;
//     .sectionTop {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       padding: 0.16rem 0.32rem 0.24rem 0.32rem;
//       h3 {
//         font-size: 0.16rem;
//         font-weight: bold;
//         color: rgba(0, 0, 0, 0.85);
//       }
//     }
//     .sectionCont {
//       padding: 0.24rem;
//       padding-top: 0;
//     }
//   }
// }
//
</style>
